import { defineAsyncComponent } from "vue";
import { getRandNodeId } from "@/utils/process";
const Components = import.meta.glob("./component/*.vue");
const ComponentConfigs = import.meta.glob("./config/*.vue");

//批量导出所有的component下面的表单组件
export const FormComponents = {};
Object.keys(Components).forEach(key => {
  const name = key.replace(/^.+\/([^/]+)\.vue$/, "$1");
  FormComponents[name] = defineAsyncComponent(Components[key]);
});

export const FormComponentConfigs = {};
Object.keys(ComponentConfigs).forEach(key => {
  const name = key.replace(/^.+\/([^/]+)\.vue$/, "$1");
  FormComponentConfigs[name] = defineAsyncComponent(ComponentConfigs[key]);
});

const TextInput = {
  create() {
    return {
      id: getRandNodeId(),
      icon: "iconamoon:edit",
      type: "TextInput",
      name: "单行输入",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        maxlength: 32,
        validate: [],
        placeholder: ""
      }
    };
  }
};

const Button = {
  create() {
    return {
      id: getRandNodeId(),
      icon: "ep:crop",
      type: "Button",
      name: "按钮",
      props: {
        isContainer: false,
        isSubform: false,
        isFormItem: false,
        placeholder: "按钮",
        type: "primary",
        circle: false,
        action: {
          type: "0",
          moduleId: "",
          moduleName: ""
        },
        event: {
          onClick: ""
        }
      }
    };
  }
};

const Tooltip = {
  create() {
    return {
      id: getRandNodeId(),
      icon: "ep:question-filled",
      type: "Tooltip",
      name: "文字提示",
      props: {
        isContainer: false,
        isSubform: false,
        isFormItem: false,
        placeholder: "提示",
        placement: "right-end"
      }
    };
  }
};

const TextareaInput = {
  create() {
    return {
      id: getRandNodeId(),
      name: "多行输入",
      type: "TextareaInput",
      icon: "solar:list-down-line-duotone",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        maxlength: 255,
        rows: 2,
        validate: []
      }
    };
  }
};

const NumberInput = {
  create() {
    return {
      id: getRandNodeId(),
      name: "数字输入",
      type: "NumberInput",
      icon: "tabler:123",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        min: 1,
        max: 65535,
        precision: 0
      }
    };
  }
};

const Score = {
  create() {
    return {
      id: getRandNodeId(),
      name: "评分",
      type: "Score",
      icon: "fluent:star-12-regular",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        color: "#f0a732",
        max: 5,
        showScore: true,
        enableHalf: false,
        icon: "StarFilled"
      }
    };
  }
};

const SinglePicker = {
  create() {
    return {
      id: getRandNodeId(),
      name: "单选",
      type: "SinglePicker",
      icon: "mdi:radiobox-marked",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        expanding: false,
        optionType: "0",
        optionUrl: "",
        optionLabel: "",
        optionValue: "",
        options: [
          { label: "选项1", value: "0" },
          { label: "选项2", value: "1" }
        ]
      }
    };
  }
};

const MultiplePicker = {
  create() {
    return {
      id: getRandNodeId(),
      name: "多选",
      type: "MultiplePicker",
      icon: "mingcute:multiselect-line",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        expanding: false,
        optionType: "0",
        optionUrl: "",
        optionLabel: "",
        optionValue: "",
        options: [
          { label: "选项1", value: "0" },
          { label: "选项2", value: "1" }
        ]
      }
    };
  }
};

const DateTimePicker = {
  create() {
    return {
      id: getRandNodeId(),
      name: "日期时间",
      type: "DateTimePicker",
      icon: "material-symbols:calendar-clock-outline",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        format: "YYYY-MM-DD HH:mm"
      }
    };
  }
};

const DateTimeRangePicker = {
  create() {
    return {
      id: getRandNodeId(),
      name: "日期范围",
      type: "DateTimeRangePicker",
      icon: "material-symbols:calendar-month-outline",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        placeholder: ["开始时间", "结束时间"],
        format: "YYYY-MM-DD HH:mm",
        showLength: false
      }
    };
  }
};

const UserPicker = {
  create() {
    return {
      id: getRandNodeId(),
      name: "人员选择",
      type: "UserPicker",
      icon: "gravity-ui:persons",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        multiple: false,
        defaultLogin: false
      }
    };
  }
};

const DeptPicker = {
  create() {
    return {
      id: getRandNodeId(),
      name: "部门选择",
      type: "DeptPicker",
      icon: "fluent:organization-24-regular",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        multiple: false,
        defaultLogin: false
      }
    };
  }
};

const FileUpload = {
  create() {
    return {
      id: getRandNodeId(),
      name: "文件上传",
      type: "FileUpload",
      icon: "ep:upload-filled",
      props: {
        isContainer: false,
        isFormItem: true,
        required: false,
        size: 2,
        limit: 2,
        accept: [".pdf"]
      }
    };
  }
};

const SpanLayout = {
  create() {
    return {
      id: getRandNodeId(),
      icon: "tabler:layout-columns",
      type: "SpanLayout",
      name: "分栏布局",
      props: {
        isContainer: true,
        isSubform: false,
        isFormItem: false,
        span: 24,
        number: 2,
        gutter: 5,
        columns: []
      }
    };
  }
};

const CardLayout = {
  create(subform: boolean) {
    return {
      id: getRandNodeId(),
      icon: "ep:credit-card",
      type: "CardLayout",
      name: subform ? "卡片子表单" : "卡片",
      props: {
        isContainer: true,
        isSubform: subform,
        isFormItem: false,
        columns: []
      }
    };
  }
};

const TableList = {
  create() {
    return {
      id: getRandNodeId(),
      name: "可编辑表格",
      type: "TableList",
      icon: "mdi:table",
      props: {
        isContainer: false,
        isSubform: true,
        isFormItem: false,
        required: false,
        showBorder: true,
        height: 100,
        columns: [], //列设置
        converts: []
      }
    };
  }
};

const UniqueCode = {
  create() {
    return {
      id: getRandNodeId(),
      name: "唯一编码",
      type: "UniqueCode",
      icon: "ri:list-ordered-2",
      props: {
        isContainer: false,
        isFormItem: true,
        placeholder: "",
        hideLabel: false,
        required: false,
        codetype: "randnumber"
      }
    };
  }
};

const DictPicker = {
  create() {
    return {
      id: getRandNodeId(),
      name: "字典选择",
      type: "DictPicker",
      icon: "ri:list-unordered",
      props: {
        isContainer: false,
        isFormItem: true,
        required: true,
        dictcode: "",
        multiple: false
      }
    };
  }
};

const CurrentUser = {
  create() {
    return {
      id: getRandNodeId(),
      icon: "gravity-ui:persons",
      type: "CurrentUser",
      name: "当前人员",
      props: {
        isContainer: false,
        isFormItem: true,
        required: true,
        placeholder: "自动获取当前登录人员姓名",
        hideLabel: false,
        maxlength: 32
      }
    };
  }
};

const CurrentDept = {
  create() {
    return {
      id: getRandNodeId(),
      icon: "fluent:organization-24-regular",
      type: "CurrentDept",
      name: "当前部门",
      props: {
        isContainer: false,
        isFormItem: true,
        required: true,
        placeholder: "自动获取当前登录人员所在部门名称",
        hideLabel: false,
        maxlength: 32
      }
    };
  }
};

const Grid = {
  create(subform: boolean) {
    return {
      id: getRandNodeId(),
      icon: "tabler:layout-columns",
      type: "Grid",
      name: subform ? "栅格子表单" : "栅格",
      props: {
        isContainer: true,
        isSubform: subform,
        isFormItem: false,
        gutter: 10,
        columns: [GridCol.create(1), GridCol.create(2)]
      }
    };
  }
};

const GridCol = {
  create(index: number) {
    return {
      id: "GridCol" + getRandNodeId(),
      icon: "ep:search",
      type: "GridCol",
      name: "栅格列" + index,
      code: "GridCol" + getRandNodeId(),
      props: {
        isContainer: true,
        isSubform: false,
        isFormItem: false,
        span: 12,
        offset: 0,
        push: 0,
        pull: 0,
        columns: []
      }
    };
  }
};

export const FormItem = {
  UniqueCode,
  Button,
  TextInput,
  TextareaInput,
  NumberInput,
  Score,
  SinglePicker,
  MultiplePicker,
  DateTimePicker,
  DateTimeRangePicker,
  CurrentUser,
  CurrentDept,
  UserPicker,
  DeptPicker,
  DictPicker,
  FileUpload,
  TableList,
  Tooltip,
  CardLayout
};

export const commonComponents = [
  {
    name: "布局组件",
    components: [SpanLayout.create()]
  },
  {
    name: "容器组件",
    components: [
      CardLayout.create(false),
      Grid.create(false),
      CardLayout.create(true),
      Grid.create(true)
    ]
  },
  {
    name: "辅助组件",
    components: [Button.create(), Tooltip.create()]
  }
];

export const components = [
  ...commonComponents,
  {
    name: "表单组件",
    components: [
      UniqueCode.create(),
      CurrentUser.create(),
      CurrentDept.create(),
      TextInput.create(),
      TextareaInput.create(),
      NumberInput.create(),
      Score.create(),
      SinglePicker.create(),
      MultiplePicker.create(),
      DateTimePicker.create(),
      DateTimeRangePicker.create(),
      UserPicker.create(),
      DeptPicker.create(),
      DictPicker.create(),
      FileUpload.create()
    ]
  },
  {
    name: "高级组件",
    components: [TableList.create()]
  }
];

export default {
  components
};
